<!doctype html>
<html ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.min.css">
  <style>
  .page-list .pagination {
    float: left;
  }
  
  .page-list .pagination span {
    cursor: pointer;
  }
  
  .page-list .pagination .separate span {
    cursor: default;
    border-top: none;
    border-bottom: none;
  }
  
  .page-list .pagination .separate span:hover {
    background: none;
  }
  
  .page-list .page-total {
    float: left;
    margin: 25px 20px;
  }
  
  .page-list .page-total input,
  .page-list .page-total select {
    height: 26px;
    border: 1px solid #ddd;
  }
  
  .page-list .page-total input {
    width: 40px;
    padding-left: 3px;
  }
  
  .page-list .page-total select {
    width: 50px;
  }
  </style>
</head>

<body ng-controller="testController">
  <div class="col-lg-3 col-sm-4 col-xs-6 pull-left" ng-repeat="item in products">
    <div class="image-area text-center">
      <img ng-src="{{ item.image }}" />
    </div>
    <div class="text-center text-title">
      {{ item.name }}
    </div>
  </div>
  <div class="clearfix"></div>
  <tm-pagination conf="paginationConf"></tm-pagination>
  <script src="/assets/lib/angular/1.2.18/angular.min.js"></script>
  <script src="/hy5b/frontend/pagination/tm.pagination.js"></script>
  <script>
  angular.module('myApp', ['tm.pagination']).controller('testController', function($scope){
  //     *
  //      * I'm not good at English, wish you you catch what I said And help me improve my English.
  //      *
  //      * A lightweight and useful pagination directive
  //      * conf is a object, it has attributes like below:
  //      *
  //      * currentPage: Current page number, default 1
  //      * totalItems: Total number of items in all pages
  //      * itemsPerPage:  number of items per page, default 15
  //      * onChange: when the pagination is change, it will excute the function.
  //      *
  //      * pagesLength: number for pagination size, default 9
  //      * perPageOptions: defind select how many items in a page, default [10, 15, 20, 30, 50]
  //      * rememberPerPage: use to remember how many items in a page select by user.
  //      *

      $scope.paginationConf = {
          currentPage: 1,
          totalItems: 8000,
          itemsPerPage: 15,
          pagesLength: 15,
          perPageOptions: [10, 20, 30, 40, 50],
          rememberPerPage: 'perPageItems',
          onChange: function(){

          }
      };
  })
  // angular.module('myApp', ['tm.pagination']).controller('testController', function($scope, $http) {

  //   // 重新获取数据条目
  //   var reGetProducts = function() {
  //     // 发送给后台的请求数据
  //     var postData = {
  //       currentPage: $scope.paginationConf.currentPage,
  //       itemsPerPage: $scope.paginationConf.itemsPerPage
  //     };

  //     $http.post('/service/getProducts', postData).success(function(data) {
  //       // 变更分页的总数
  //       $scope.paginationConf.totalItems = data.total;
  //       // 变更产品条目
  //       $scope.products = data.items;
  //     });
  //   };

  //   // 配置分页基本参数
  //   $scope.paginationConf = {
  //     currentPage: 1,
  //     itemsPerPage: 15
  //   };

  //   // 通过$watch currentPage和itemperPage 当他们一变化的时候，重新获取数据条目
  //   $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', reGetProducts);


  // })
  </script>
</body>

</html>
